<template>
  <div>
      <div style="float: right;margin-right:2%;">
        <el-button style='margin: 10px 0;' :disabled="!isAuth('storeList:add')" size="mini" type="primary" icon="document" @click="add">添加类型</el-button>
      </div>
      <el-table
        v-loading="tableDataLoading"
        :data="tableData">
        <el-table-column
          prop="id"
          label="编号">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              :disabled="!isAuth('storeList:update')"
              @click="updates(scope.$index, scope.row)">修改
            </el-button>
            <el-button
              size="mini"
              type="danger"
              :disabled="!isAuth('storeList:delete')"
              @click="deletes(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 修改轮播 -->
      <el-dialog :title="form.id?'修改':'添加'" :visible.sync="dialogFormVisible" center>
        <el-form :model="form">
          <el-form-item label="名称：" :label-width="formLabelWidth" >
            <el-input v-model="form.name" style="width:65%;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'BannerType',
    data() {
      return {
        tableDataLoading: false,
        tableData: null,
        dialogFormVisible: false,
        formLabelWidth: '100px',
        form: {
          name: ''
        }
      }
    },
    methods: {
      add(){
        this.form = {
          name: ''
        }
        this.dialogFormVisible = true
      },
      save(){
        this.$http({
          url: this.$http.adornUrl2(this.form.id?'/banner/updateType':'/banner/saveType'),
          method: 'get',
          params: this.$http.adornParams({
            ...this.form
          })
        }).then(({data}) => {
          this.dialogFormVisible = false
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.imgUrl = ''
              this.linkUrl = ''
              this.sort = ''
              this.dataSelect()
            }
          })
        })
      },
      // 修改
      updates(index,rows){
        this.dialogFormVisible = true;
        this.form.id = rows.id;
        this.form.name = rows.name;
      },
      // 删除
      deletes(row){
        this.$confirm(`确定删除此条信息?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl2('/banner/deleteType'),
            method: 'get',
            params: this.$http.adornParams({
              'id':row.id
            })
          }).then(({data}) => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.dataSelect()
              }
            })
          })
        }).catch(() => {})
      },
      // 获取轮播数据
      dataSelect () {
        this.tableDataLoading = true
        this.$http({
          url: this.$http.adornUrl2('/banner/findType'),
          method: 'get',
          params: this.$http.adornParams({
          })
        }).then(({data}) => {
          this.tableDataLoading = false
          let returnData = data.data;
          console.log(returnData)
          this.tableData = returnData
        })
      },
    },
    mounted() {
      this.dataSelect()
    }
  }
</script>

<style lang="scss" scoped>

</style>
